<template>
  <div class="all">
    <div class="enclosure">
      <div class="logo">
        <img
          src="https://passport.baidu.com/static/passpc-account/img/baidu.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="text">
        <h3
          style="
            font-size: 54px;
            letter-spacing: 0;
            margin: 0;
            font-weight: 700;
          "
        >
          用科技
        </h3>
        <p
          style="
            font-size: 32px;
            letter-spacing: 3.81px;
            margin: 0;
            font-weight: 300;
          "
        >
          让复杂的世界变的更简单
        </p>
      </div>
    </div>
    <div class="content">
      <div style="margin: 30px 0 0 39px">
        <h1>欢迎注册</h1>
        <span style="font-size: 14px; color: #9b9b9b">已有帐号？</span>
        <span style="color: #2e58ff; cursor: pointer">登录</span>
      </div>

      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        label-width="120px"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="密　码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type=""
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="验证码" prop="phone">
          <el-input v-model.number="ruleForm.phone" />
        </el-form-item>
        <el-form-item>
          <el-button round type="primary" size="large" @click="onSubmit()"
            >注册</el-button
          >
        </el-form-item>
        <div class="footer">
          <input type="checkbox" style="position: relative; top: -2px" />
          <label
            for="true"
            style="color: #666; font-size: 12px; margin-left: 5px"
          ></label>
          阅读并接受
          <a href="" class="a">《百度用户协议》</a>、
          <a href="" class="a">《儿童个人信息保护声明》</a>、
          <a href="" class="a">《百度隐私权保护声明》</a>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Register",
});
</script>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { useUserStore } from "@/stores/user"
const router = useRouter()
const store = useUserStore()

const onSubmit = async () => {
  try {
    await ruleFormRef.value.validate();
    await store.getRegister(ruleForm)
    router.push("/login")
    ElMessage.success("注册成功")
  } catch (e: any) {
    console.log(e);
  }
};

// const ruleFormRef = ref<FormInstance>()

// const checkAge = (rule: any, value: any, callback: any) => {
//   if (!value) {
//     return callback(new Error('Please input the age'))
//   }
//   setTimeout(() => {
//     if (!Number.isInteger(value)) {
//       callback(new Error('Please input digits'))
//     } else {
//       if (value < 18) {
//         callback(new Error('Age must be greater than 18'))
//       } else {
//         callback()
//       }
//     }
//   }, 1000)
// }

// const validatePass = (rule: any, value: any, callback: any) => {
//   if (value === '') {
//     callback(new Error('Please input the password'))
//   } else {
//     if (ruleForm.checkPass !== '') {
//       if (!ruleFormRef.value) return
//       ruleFormRef.value.validateField('checkPass', () => null)
//     }
//     callback()
//   }
// }

// const validatePass2 = (rule: any, value: any, callback: any) => {
//   if (value === '') {
//     callback(new Error('Please input the password again'))
//   } else if (value !== ruleForm.pass) {
//     callback(new Error("Two inputs don't match!"))
//   } else {
//     callback()
//   }
// }

const ruleForm = reactive({
  username: "罗飞",
  password: "123",
  email: "1697152105@qq.com",
  phone: "123",
});

// Form 表单实例
const ruleFormRef = ref();
const A = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

const validateEmail = (rule: any, value: any, callback: any) => {
  if (!A.test(value)) {
    callback(new Error("格式不正确"));
  } else {
    callback();
  }
};
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else {
    callback();
  }
};
const validatephone = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("不能为空"));
  } else {
    callback();
  }
};

const rules = ref({
  // email: [{ validator: validateEmail, trigger: "blur" }],
  // username: [{ validator: validateUser, trigger: "blur" }],
  // password: [{ validator: validatePass, trigger: "blur" }],
  // phone: [{ validator: validatephone, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
<style lang="scss" scoped>
.all {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url(./img/bg.pg.jpg) no-repeat;
  background-size: cover;
  background: none\9;
  *background: 0 0;

  .logo {
    position: fixed;
    left: 70px;
    top: 60px;
    width: 124.4px;
    height: 40px;
  }

  .text {
    position: fixed;
    left: 195px;
    top: 314px;
    color: #fff;
  }

  .content {
    position: absolute;
    right: 139px;
    top: 50%;
    margin-top: -340px;
    width: 480px;
    height: 680px;
    *background: #fff;
    // background: #fff\9;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    border-radius: 12px;
    overflow: hidden;

    .footer {
      margin-bottom: 32px;

      .a {
        text-decoration: none;
        color: #2b78e4;
      }
    }
  }
}
</style>
